<template>
  <div class="search-section" style="position: relative">
    <div class="bgFFF color000 mb12 bdradius4">
      <div style="position: relative">
        <div class="color000">
          <Card dis-hover class="criteria">
            <div ref="cardSearchBox" class="example-code ivu-col">
              <Form
                :model="pageData"
                :label-width="66"
                label-position="left"
                inline
              >
                <Row class="search-input">
                  <Col :xs="12" :sm="10" :md="8" :lg="6" :xl="{span:'14-2'}">
                    <FormItem label="居民姓名">
                      <Input
                        type="text"
                        v-model="pageData.name"
                        clearable
                        @on-clear="onSearch"
                        placeholder="请输入居民姓名"
                      />
                    </FormItem>
                  </Col>
                  <Col :xs="12" :sm="10" :md="8" :lg="6" :xl="{span:'14-2'}">
                    <FormItem label="联系电话">
                      <Input
                        type="text"
                        v-model="pageData.phone"
                        clearable
                        @on-clear="onSearch"
                        placeholder="请输入联系电话"
                      />
                    </FormItem>
                  </Col>
                  <Col :xs="12" :sm="10" :md="8" :lg="6" :xl="{span:'14-2'}">
                    <FormItem label="身份证号">
                      <Input
                        type="text"
                        v-model="pageData.idCard"
                        clearable
                        @on-clear="onSearch"
                        placeholder="请输入身份证号"
                      />
                    </FormItem>
                  </Col>
                  <Col :xs="12" :sm="10" :md="8" :lg="4" :xl="{span:'14-2'}">
                    <FormItem label="标签">
                      <Select v-model="pageData.tagsIdList" multiple transfer placeholder="请选择标签" :max-tag-count="2" :max-tag-placeholder="maxTagPlaceholder" :class="pageData.tagsIdList && pageData.tagsIdList.length > 2 ? 'more-select' : ''">
                        <OptionGroup :label="item.tagName" v-for="item in tagList" :key="item.id">
                          <Option v-for="itemC in item.children" :value="itemC.id" :key="itemC.id">{{ itemC.tagName }}</Option>
                        </OptionGroup>
                      </Select>
                    </FormItem>
                  </Col>
                  <Col :xs="12" :sm="10" :md="8" :lg="4" :xl="{span:'14-2'}">
                    <FormItem label="来源">
                      <Select
                        v-model="pageData.source"
                        clearable
                        @on-clear="onSearch"
                        :transfer="true"
                        placeholder="请选择来源"
                      >
                        <Option v-for="item in sourceList" :key="item.id" :value="item.id">{{ item.name }}</Option>
                      </Select>
                    </FormItem>
                  </Col>
                  <Col :xs="12" :sm="10" :md="8" :lg="4" :xl="{span:'14-2'}">
                    <Button
                      class="mr20"
                      icon="ios-search"
                      type="primary"
                      @click="onSearch()"
                    >搜索
                    </Button>
                    <Button @click="onReset()">重置</Button>
                  </Col>
                </Row>
              </Form>
            </div>
          </Card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    TabsName: {
      type: String,
      default: '',
    },
    tagList: {
      type: Array,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      tabsName: this.TabsName,
      pageData: {
        total: "",
        page: {
          size: 10, // 每页多少操作
          current: 1, // 当前第几页
        },
      },
      // 1-主动添加 2-批量导入3-缴费补充
      sourceList: [{
        id: 1,
        name: "主动添加",
      }, {
        id: 2,
        name: "批量导入",
      }, /*{
        id: 3,
        name: "缴费补充",
      },*/]
    };
  },
  computed: {
    styles() {
      let width = this.width || 100;
      return {
        width: width <= 100 ? `${width}%` : `${width}px`,
      };
    },
  },
  created() {
  },
  watch: {
    $route(val) {
      this.tabsName = this.$route.query.tabsName;
    }
  },
  methods: {
    //添加时间
    handleDaterangeInput(data) {
      this.pageData.addStartDate = data[0];
      this.pageData.addEndDate = data[1];
      if (this.pageData.addStartDate == "" && this.pageData.addEndDate == "") {
        this.$emit("onSearch", this.pageData);
      }
    },
    // 缴费年份
    handleDaterangeInput1(data) {
      this.pageData.orderYear = data;
      if (this.pageData.orderYear == "") {
        this.$emit("onSearch", this.pageData);
      }
    },
    maxTagPlaceholder (num) {
      return '···';
    },
    onSearch() {
      this.pageData.page.current = 1;
      this.pageData.total = 0;
      this.$emit("onSearch", this.pageData);
    },
    onReset() {
      this.pageData = {
        total: "",
        page: {
          size: 10, // 每页多少操作
          current: 1, // 当前第几页
        },
      }
      this.$emit("onSearch", this.pageData);
    },
  },
};
</script>
<style lang="less" scoped>
</style>
